<template>
    <a-form
        :model = "form"
        :label-col = "labelCol"
        :wrapper-col = "wrapperCol"
    >
        <a-form-item
            label = "任务名"
        >
            <a-input
                v-model:value = "form.name"
            />
        </a-form-item>
        <a-form-item
            label = "描述"
        >
            <a-textarea
                v-model:value = "form.description"
                placeholder = "Describe the Task."
            />
        </a-form-item>
        <a-form-item
            :wrapper-col = "{ span: 14, offset: 4 }"
        >
            <a-button type = "primary" @click = "createMission()">创建</a-button>
        </a-form-item>
    </a-form>
</template>

<script>
import Axios from 'axios';
import Dialog from '@/utils/dialog.js';

export default {
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            form: {
                name: '',
                description: ''
            }
        }
    },
    methods: {
        createMission() {
            Axios.post(
                "/mission/create",
                this.form
            ).then((response) => {
                if (response.data.type == 'success')
                    Dialog.toasts.success(response.data.info);
                else
                    Dialog.toast.error(response.data.info);
            }).catch(() => {
                Dialog.toasts.error("网络错误");
            })
            this.$router.push({ path: '/mission/list' })
        }
    }
};
</script>